<template>
    <div class="login">
        <el-tabs v-model="activeName">
        <el-tab-pane label="聊天登录" name="first">
          <!-- 用户名输入 -->
            <el-input v-model="username" placeholder="请输入用户名">
              <el-button slot="append" @click="login">登录</el-button>
            </el-input>
            <!-- 头像选择 -->
            <div class="avatar">
              <span @click="avatar(item.img)" v-for="(item,index) in avatarList" :key="index">
                <el-avatar :src="item.img" :class="{'choosed':item.img==choosed}"></el-avatar>
              </span>
            </div>
        </el-tab-pane>
        <el-tab-pane label="视频登录" name="second" class="videoRoom">
            <el-input placeholder="请输入登录名" v-model="account"></el-input>
            <el-input placeholder="请输入房间号" v-model="roomid" style="margin-top:10px">  </el-input>
            <el-button style="float: right;margin-top:10px" type="primary" round @click="join">登录</el-button>
        </el-tab-pane>
      </el-tabs>
    </div>
</template>

<script>
import store from '@/store/index';
export default {
    name: 'ChatroomLogin',

    data() {
        return {
          activeName:'second',
          username:'',
          choosed:'',
          account:'',
          roomid:'',
          avatarList:[{
            name: '仙女',
            img: require('../assets/1.jpg'),
            }, {
            name: '甜甜姐',
            img: require('../assets/2.jpg'),
            }, {
            name: '老妈',
            img: require('../assets/3.jpg'),
            }, {
            name: '张奥',
            img: require('../assets/4.jpg'),
            }, {
            name: '旋哥',
            img: require('../assets/5.jpg'),
            }, {
            name: '翁文凯',
            img: require('../assets/touxiang.jpg'),         
            }],
          } 
    },

    mounted() {
        
    },
    computed:{
      userList(){
            return store.state.userList;
        }
    },
    methods: {     
        async login(){
            if(this.username && this.choosed){
              let judgeLogin = false;
                /* 连接socket */
                this.$socket.connect();
                judgeLogin = await this.$socket.emit('login',{name:this.username,img:this.choosed},(result)=>{
                    judgeLogin  = result;
                    console.log('result is',result)
                    console.log('judgeLogin is', judgeLogin);
                    if(judgeLogin){
                      /* 告诉vuex修改个人信息 */
                      store.commit('setMyInfo',{
                      img:this.choosed,
                      name:this.username,
                      });
                      this.$message.success('登陆成功!')
                      window.sessionStorage.setItem("token",this.username)
                      this.$router.push("/tokenList")
                    }else{
                      this.$message.error('用户已经存在!');
                    }
                });   
            }
        },
        avatar(src){
            this.choosed = src;
        },
        join() {	
          if (this.account && this.roomid) {	
              this.$router.push({path:'/webRoom',	
              params: {roomid: this.roomid, account: this.account}})	
              // this.$router.push("/webRoom")
          }	
        // 参数是路由形式的，如 room/id/account	
    }	
    },
};
</script>

<style lang="scss" scoped>

.choosed{
  border:  solid 1px red;
}
.login{
  width: 50%;
  margin-left: 25%;
  border: solid 1px rgb(228, 231, 237);
  padding: 30px;
}
.login .avatar{
  margin-top: 20px;
}
.login .avatar .el-avatar{
  cursor: pointer;
}
.videoRoom{
  padding: auto;
}
</style>